<template>
	<div>
		<div class="question-title-box q-error-title">
			<span class="q-style-type">【{{ Dictionary.get("rc_questionType")[questionType] }}】</span>
			<ve-parse class="q-style-text" :article="questionTitle" />
		</div>
		<div class="q-error-options q-style-options">
			<div v-for="item in questionOption" :key="item.optionSeq" class="option-item">
				<div class="radio-btn">
					<!-- 单选题 -->
					<el-radio v-if="questionType === 'S'" :value="item.isAnswer === 'Y' ? '' : 'n'" :label="''" />
					<!-- 多选题 不定项 配伍题 -->
					<el-checkbox v-else :value="item.isAnswer === 'Y'" />
				</div>
				<ve-parse :article="`${item.optionSeq}. ${item.answerOption}`" />
			</div>
		</div>
	</div>
</template>
<script>
	/**
	 * @description 单选题  多选择题 不定项选择题组件
	 */
	export default {
		props: {
			// 题目的类型
			questionType: {
				type: String,
				default: "S"
			},
			// 题目题干
			questionTitle: {
				type: String,
				default: ""
			},
			// 题目答案列表
			questionOption: {
				type: Array,
				default: () => []
			}
		}
	};
</script>
<style lang="less" scoped>
	.question-title-box {
		margin-bottom: 10px;
	}

	.option-item {
		display: flex;

		/deep/ .el-checkbox__inner {
			padding: 0;
		}
		/deep/ .el-radio,
		/deep/ .el-checkbox,
		/deep/ .el-radio__label,
		/deep/ .el-checkbox__label,
		/deep/ .el-radio__input,
		/deep/ .el-checkbox__input,
		/deep/ .el-radio__inner,
		/deep/ .el-checkbox__inner {
			cursor: default;
		}
        /deep/ .el-radio__label {
            padding: 0;
        }
		/deep/ .el-radio__inner:hover {
			border-color: #dcdfe6;
		}
		/deep/ .el-radio__input.is-checked .el-radio__inner,
		/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
			border-color: #999;
			background: #999;
		}
		/deep/ .el-checkbox__inner:hover {
			border-color: #dcdfe6;
		}
		.radio-btn {
			flex-shrink: 0;
			margin-right: 10px;
		}
	}
</style>
